<template>
  <div class="bottom-bar">
    <div class="select">
      <div @click="checkClick" class="check-content">
        <check-button :is-checkd="isSelectAll" class="check-button"></check-button>
        <span>全选</span>
      </div>
      <div class="total">
        合计:{{totalPrice}}
      </div>
    </div>

    <div @click="checkSubmit" class="submit">
      去计算({{cartLength}})
    </div>
  </div>
</template>

<script>
  import CheckButton from "../../../components/content/checkButton/CheckButton";
  import {mapGetters} from "vuex";


  export default {
    name: "CartBottomBar",
    data() {
      return {}
    },
    components: {
      CheckButton
    },
    computed: {
      ...mapGetters([
        'cartLength',
        'cartList'
      ]),
      totalPrice() {
        return "￥" + this.$store.getters.cartList.filter(item => {
          return item.checkd
        }).reduce((prevalue, item) => {
          return prevalue + item.price * item.count
        }, 0).toFixed(2)
      },
      isSelectAll() {
        // return !(this.cartList.filter(item => !item.checkd).length)
        if (this.cartList.length === 0) return false
        return !(this.cartList.find(item => !item.checkd))
      }
    },
    methods: {
      checkClick() {
        this.$store.dispatch('updatedCheckd', !this.isSelectAll)
      },
      checkSubmit() {
        if (!this.isSelectAll) {
          this.$toast.show('当前没有选中商品', 1500)
        } else {
          this.$toast.show('即将跳转到结算页面', 1500)
        }
      }
    }
  }
</script>

<style scoped>

  .bottom-bar {
    display: flex;
    height: 40px;
    background-color: #ffffff;
    position: relative;
    font-size: 14px;
    line-height: 40px;
  }

  .select {
    display: flex;
  }

  .check-content {
    display: flex;
    align-items: center;
    color: #aaa1a1;
  }

  .check-button {
    width: 20px;
    height: 20px;
    margin: 0 5px;
  }


  .total {
    margin-left: 10px;
  }

  .submit {
    position: absolute;
    right: 0;
    padding: 0 10px;
    background-color: rgb(255, 81, 0);
    color: #ffffff;
  }
</style>
